<template>
  <div>
    <h3>这是我的留言板</h3>
    <input type="text" v-model="msg">
    <input type="button" @click="add_note" value="发表留言">
    <ul>
      <li v-for="(note,index) in msg_list" :key="index">
        {{note}}
        <a href="javascript:;" @click="delete_note(index)" >删除留言</a>
      </li>
    </ul>
    <span>留言量总量{{msg_list.length}}条</span>
    <br>
    <input type="button" value="清空留言" @click="delete_all" v-show="msg_list.length>0">
  </div>
</template>

<!--编写js代码的地方-->
<script>
//将组件导出
export default {
  name: "first",
  data: function () {
    return {
      msg: "",
      msg_list: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],
    }
  },
  methods: {
    add_note() {
      let msg = this.msg;
      if (msg) {
        this.msg_list.push(this.msg);
        localStorage.msgs = JSON.stringify(this.msg_list);
        this.msg = "";
      }
    },
    delete_note(index){
      this.msg_list.splice(index,1)
    },
    delete_all(){
      let len = this.msg_list.length;
      console.log(len)
      this.msg_list.splice(0,len);
    }

  }
}
</script>

<style scoped>

</style>
